<template>
  <view class="password-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">修改密码</text>
    </view>
    
    <view class="password-container">
      <view class="form-group">
        <view class="input-item">
          <text class="input-label">当前密码</text>
          <input 
            class="input-field" 
            type="password" 
            v-model="passwordForm.oldPassword" 
            placeholder="请输入当前密码"
            password
          />
        </view>
        
        <view class="input-item">
          <text class="input-label">新密码</text>
          <input 
            class="input-field" 
            type="password" 
            v-model="passwordForm.newPassword" 
            placeholder="请输入新密码（8-20位字母、数字组合）"
            password
          />
        </view>
        
        <view class="input-item">
          <text class="input-label">确认新密码</text>
          <input 
            class="input-field" 
            type="password" 
            v-model="passwordForm.confirmPassword" 
            placeholder="请再次输入新密码"
            password
          />
        </view>
      </view>
      
      <view class="password-rules">
        <text class="rules-title">密码须符合：</text>
        <view class="rule-item">
          <text class="rule-icon" :class="{ active: rules.length }">✓</text>
          <text class="rule-text">长度为8-20个字符</text>
        </view>
        <view class="rule-item">
          <text class="rule-icon" :class="{ active: rules.letter }">✓</text>
          <text class="rule-text">包含字母</text>
        </view>
        <view class="rule-item">
          <text class="rule-icon" :class="{ active: rules.number }">✓</text>
          <text class="rule-text">包含数字</text>
        </view>
        <view class="rule-item">
          <text class="rule-icon" :class="{ active: rules.match }">✓</text>
          <text class="rule-text">两次密码输入一致</text>
        </view>
      </view>
      
      <view class="form-actions">
        <button class="save-btn" :disabled="!canSubmit" @tap="changePassword">保存修改</button>
      </view>
      
      <view class="forgot-password" @tap="forgotPassword">
        <text>忘记密码？</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';

// 密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 密码规则检查
const rules = reactive({
  length: false,
  letter: false,
  number: false,
  match: false
});

// 检查是否可以提交
const canSubmit = computed(() => {
  return passwordForm.oldPassword &&
         rules.length &&
         rules.letter &&
         rules.number &&
         rules.match;
});

// 监听密码变化，检查规则
watch(() => passwordForm.newPassword, (val) => {
  rules.length = val.length >= 8 && val.length <= 20;
  rules.letter = /[a-zA-Z]/.test(val);
  rules.number = /[0-9]/.test(val);
  checkMatch();
});

watch(() => passwordForm.confirmPassword, () => {
  checkMatch();
});

// 检查两次密码是否一致
const checkMatch = () => {
  rules.match = passwordForm.newPassword && 
                passwordForm.confirmPassword && 
                passwordForm.newPassword === passwordForm.confirmPassword;
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 修改密码
const changePassword = () => {
  if (!canSubmit.value) {
    uni.showToast({
      title: '请检查密码格式',
      icon: 'none'
    });
    return;
  }
  
  uni.showLoading({
    title: '修改中...'
  });
  
  // 实际项目中这里应该调用API修改密码
  setTimeout(() => {
    uni.hideLoading();
    
    uni.showToast({
      title: '密码修改成功',
      icon: 'success'
    });
    
    // 密码修改成功后返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 2000);
};

// 忘记密码
const forgotPassword = () => {
  uni.navigateTo({
    url: '/pages/password-reset/index'
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.password-page {
  min-height: 100vh;
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(44, 120, 115, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #2c7873;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c7873;
    }
  }
  
  .password-container {
    padding: 20px 15px;
    
    .form-group {
      background-color: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
      
      .input-item {
        padding: 16px;
        border-bottom: 1px solid rgba(141, 110, 99, 0.08);
        
        &:last-child {
          border-bottom: none;
        }
        
        .input-label {
          font-size: 15px;
          color: #5d4037;
          margin-bottom: 10px;
          display: block;
        }
        
        .input-field {
          width: 100%;
          height: 40px;
          font-size: 15px;
          color: #333;
          border: 1px solid rgba(141, 110, 99, 0.2);
          border-radius: 6px;
          padding: 0 12px;
          background-color: rgba(141, 110, 99, 0.05);
        }
      }
    }
    
    .password-rules {
      background-color: #fff;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
      
      .rules-title {
        font-size: 15px;
        color: #5d4037;
        margin-bottom: 10px;
        display: block;
      }
      
      .rule-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .rule-icon {
          width: 20px;
          height: 20px;
          border-radius: 10px;
          background-color: #e0e0e0;
          color: #fff;
          font-size: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          
          &.active {
            background-color: #4caf50;
          }
        }
        
        .rule-text {
          font-size: 14px;
          color: #5d4037;
        }
      }
    }
    
    .form-actions {
      margin: 30px 0;
      
      .save-btn {
        width: 100%;
        height: 44px;
        line-height: 44px;
        background-color: #2c7873;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        border-radius: 12px;
        text-align: center;
        
        &:disabled {
          background-color: #cccccc;
        }
      }
    }
    
    .forgot-password {
      text-align: center;
      
      text {
        font-size: 14px;
        color: #2196f3;
        text-decoration: underline;
      }
    }
  }
}
</style> 